<template>
  <div class="day-all-day-event">
      <div v-for="(item, index) in deEvent" :key="item.id" class="day-all-event-box">
        <div class="day-event-cell" :data-index="index" :style="{background:item.background, color:item.color}" v-if="index < 3 || showMore" :data-id="item.id" @click.prevent.stop="getEvent">
            <slot :title="item.title" :actionStartTime="item.actionStartTime" :actionEndTime="item.actionEndTime"></slot>
        </div>
      </div> 
      <div class="more-event-options" v-if="deEvent.length > 3">
          <div class="more-event" @click="openMore" v-if="!showMore">+{{deEvent.length - 3}} 更多事件</div>
          <div class="more-event" @click="showMore = false" v-else><up theme="outline" size="18"/>收起</div>
      </div>
  </div>
</template>

<script>
import { Up } from '@icon-park/vue-next';
import { toRefs, watch, onMounted, ref, nextTick } from 'vue'
import { getAnyTimeEvent } from '../lib/event'
export default {
    name: 'AllDayEventItem',
    props: {
        event: {
            type: Array,
            default() {
                return []
            }
        },
        date: {
            type: String,
            default: null
        }
    },
    components: {
        Up
    },
    setup(props, context) {
        const { event, date } = toRefs(props)
        let deEvent = ref([])
        let showMore = ref(false)
        const openMore = () => {
            showMore.value = true
        }
         // 点击事件
        const getEvent = e => {
            context.emit('getEvent', e)
        }
        watch(() => date.value,
            () => {
                nextTick(() => {
                    deEvent.value = getAnyTimeEvent(date.value, event.value)
                })
            },
            {
                deep: true
            }
        ),
        watch(() => event.value,
            () => {
                nextTick(() => {
                    deEvent.value = getAnyTimeEvent(date.value, event.value)
                })
            },
            {
                deep: true
            }
        )
        onMounted(() => {
            nextTick(() => {
                showMore.value = false
                deEvent.value = getAnyTimeEvent(date.value, event.value)
            })
        })
        return {
            deEvent,
            openMore,
            showMore,
            getEvent
        }
    }
}
</script>

<style scoped lang="scss">
.day-all-day-event{
    padding-bottom: 5px;
    padding-right: 2px;
    position: relative;
    margin-top: 40px;
}
.day-all-event-box{
    max-height: 50vh;
    overflow-y: auto;
}
.day-all-day-event .day-event-cell{
    position: relative;
    border-radius: 2px;
    background: #eaf4fc;
    color: var(--ss-color-primary);
    padding: 0 5px;
    font-size: 12px;
    height: 20px;
    line-height: 20px;
    margin-left: 1px;
    overflow: hidden;
    border: 1px solid #fff;
    box-sizing: border-box;
    cursor: pointer;
}
.day-all-day-event .more-event-options .more-event{
    position: relative;
    flex: 1;
    overflow: hidden;
    text-align: center;
    margin-top: 2px;
    cursor: pointer;
    font-size: 12px;
    color: #909399;
    display: flex;
    align-items: stretch;
    justify-content: center;
}
.day-all-day-event .more-event-options .more-event:hover{
    color: var(--ss-color-primary);
}
</style>